<template>
    <div class="cesium-mouse-position">
        经度:{{ position.Lat }} 纬度:{{ position.Lon }}
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const props = defineProps<{
    map: Cesium.Viewer
}>()

const position = ref<{ Lat: string; Lon: string }>({
    Lat: '',
    Lon: '',
})

onMounted(() => {
    const viewer = props.map

    viewer.canvas.addEventListener(
        'mousemove',
        function (e) {
            var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY)
            var ellipsoid = viewer.scene.globe.ellipsoid
            var cartesian = viewer.camera.pickEllipsoid(
                mousePosition,
                ellipsoid,
            )
            if (cartesian) {
                var cartographic = ellipsoid.cartesianToCartographic(cartesian)
                var longitudeString = Cesium.Math.toDegrees(
                    cartographic.longitude,
                ).toFixed(2)
                var latitudeString = Cesium.Math.toDegrees(
                    cartographic.latitude,
                ).toFixed(2)
                console.log(
                    '经度: ' + longitudeString + ', 纬度: ' + latitudeString,
                )

                position.value.Lat = latitudeString
                position.value.Lon = longitudeString
            }
        },
        false,
    )
})
</script>

<style lang="scss" scoped>
@use '/src/assets/scss/main.scss' as *;
.cesium-mouse-position {
    background-color: $c-gray-10;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid $c-gray-8;
    font-size: 12px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
</style>
